<template>
  <div>
    {{ obj.myname }}
    <button @click="btn">点我改名1111</button>

    <hr />
    <h1>todolist</h1>
    <input type="text"
      v-model="obj.txt" /> <button @click="add">add</button>

    <ul>
      <li v-for="item in obj.mylist"
        :key="item">{{ item }}</li>
    </ul>
    <hr />
    <button @click="fn">点我再次改名</button>
    <h2>{{ nnname }}</h2>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
export default {
  setup () {
    const obj = reactive({
      myname: 'zp',
      txt: '',
      mylist: []
    })
    const btn = () => {
      obj.myname = '1111'
    }
    const nnname = ref('xxx')
    const fn = () => {
      nnname.value = 'sssssssss'
    }

    const add = () => {
      obj.mylist.push(obj.txt)
      obj.txt = ''
    }

    return {
      obj,
      btn,
      add,
      nnname,
      fn
    }
  }
}
</script>

<style>
</style>
